<template>
  <section class="cms-body flex">

    <!-- 树组件 -->
    <cms-tree @change="getChannelId" :hasContent='true'></cms-tree>

    <div class="cms-content-right">
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label class="">当前频道:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>
        <div class="cms-left channel-group" v-if="showAdd">
          <el-button type="primary" @click="jumpAdd()" v-perms="'/content/editing/save'">
            <i class="el-icon-plus "></i> 添加内容
          </el-button>
        </div>
      </div>

      <div class="cms-list-header clearfix flex" style="padding:0 24px 16px 24px;flex-wrap:wrap">
        <div style="margin-top:16px;flex:auto">
          <!-- 所有类型 -->
          <el-select class="cms-left" placeholder="所有类型" v-model="params.typeId" @change="goQuery()"
                     style="width:120px">
            <el-option label="所有类型" value=""></el-option>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <cms-input label="标题" v-model="params.title"></cms-input>
          <cms-input label="内容" v-model="params.content"></cms-input>
          <cms-input label="编辑" v-model="params.userName"></cms-input>
          <cms-input label="责编" v-model="params.checkUserName"></cms-input>
          <el-button @click="goQuery()">查询</el-button>
        </div>
      </div>

      <el-table :data="tableData" stripe @selection-change="checkIds" v-loading="loading">
        <el-table-column type="selection" width="35" align="center"></el-table-column>
        <el-table-column prop="id" label="id" width="50" align="left"></el-table-column>
        <el-table-column label="图" align="center" width="28">
          <div slot-scope="scope" style="cursor: pointer" v-if="scope.row.contentImg !='' || scope.row.liveImage !=''">
            <span @click="preivewImg(scope.row)">
              <img src="../../../../../static/images/tupian.png"
                   style="height: 20px;width: 18px;vertical-align: middle;"
                   alt="点击预览图片"/>
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="200px">
          <div slot-scope="scope" style="cursor: pointer" @click="cellClick(scope.row)" title="点击标题预览">
            <span class="cms-channel-name" style="color: #999;">[{{scope.row.channelName}}]</span>{{scope.row.title}}
          </div>
        </el-table-column>
        <!--类型 -->
        <el-table-column label="类型" prop="typeName" align="center" width="50"></el-table-column>
        <!--编辑 -->
        <el-table-column label="编辑" prop="userName" align="center" width="75">
          <div slot-scope="scope">
            <p style="color: #FFA500" @click="routerLink('/sysUser/pageList','pageList',scope.row.userId,{userType:1})">
              {{scope.row.userName}}</p>
          </div>
        </el-table-column>
        <!--责编 -->
        <el-table-column label="责编" prop="checkUserName" align="center" width="75">
          <div slot-scope="scope">
            <p style="color: #FFA500"
               @click="routerLink('/sysUser/pageList','pageList',scope.row.checkUserId,{userType:2})">
              {{scope.row.checkUserName}}</p>
          </div>
        </el-table-column>
        <!--创建时间 -->
        <el-table-column label="最后更新时间" prop="updateTime" align="center" width="120"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center" width="100">
          <div slot-scope="scope">
            <cms-button type="edit" @click.native="editRouterLink(scope.row)" v-perms="'/content/editing/update'||'sysLive/update'"></cms-button>
            <a href="javascript:void(0)" class="cms-table-button el-icon-tickets" @click="associatedContent(scope.row)" v-perms="'/content/editing/associated'">
            </a>
            <cms-button type="delete" @click.native="deleteBatch($api.viewNewsBatchFalseDelete,scope.row.id)"
                        v-perms="'/content/editing/delete'"></cms-button>

          </div>
        </el-table-column>

      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <cms-pagination :total="total" :nowPageNo="params.pageNo" @change="getPages"></cms-pagination>
      </div>

      <div class="content-fiexd">
        <el-button :disabled="disabled" @click="deleteBatch($api.viewNewsBatchFalseDelete,ids)"
                   v-perms="'/content/editing/delete'">批量删除
        </el-button>
        <el-button :disabled="disabled" @click="batchUpdate($api.viewNewsBatchToSign,1,'送签',1)"
                   v-perms="'/content/editing/toSign'">批量送签
        </el-button>

        <!--  <el-button @click="syncData()">数据同步
          </el-button>
          <el-button @click="deleteDuplicateData()">删除重复数据
          </el-button>
          <el-button @click="syncAttachmentData()">导入附件数据
          </el-button>-->
      </div>

    </div>
    <el-dialog title="文章预览" :visible.sync="isShowContent" v-if="isShowContent">
      <content-preview :contentId="previewId"></content-preview>
    </el-dialog>
    <el-dialog title="编辑推荐设置" :visible.sync="isShowDialog" v-if="isShowDialog" width="60%">
      <content-like :contentId="likeContentId" :typeId="typeId" :channelId="channelId"></content-like>
    </el-dialog>
    <el-dialog :visible.sync="isShowImageDialog" v-if="isShowImageDialog">
      <img :src="preivewSrc|imgPathFilter" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
    </el-dialog>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from 'axios'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {
          title: '',
          status: '0',
          typeId: '',
          topLevel: false,
          channelTopLevel: false,
          userName: '',
          checkUserName: '',
          recommend: false,
          orderBy: '7',
          channelId: '',
          isRecommendSlider: '',
          isChannelSlider: '',
          pageNo: 1,
          pageSize: 10,
          attchmentChannelId: 0
        },
        breadItems: [{name: '根目录', id: ''}], //面包屑
        modelList: {}, //当前频道信息
        typeList: [], //内容类型接口
        props: {label: 'name', children: 'zones', isLeaf: 'isChild', id: 'id'},
        tableHeight: 500,
        showAdd: false,
        isShowContent: false,
        previewId: '',
        isShowDialog: false,
        likeContentId: "",
        typeId: "",
        channelId: "",
        preivewSrc: '',
        isShowImageDialog: false
      }
    },
    methods: {
      preivewImg(content) {
        this.isShowImageDialog = true;
        if (content.channelId == 114) {
          this.preivewSrc = content.liveImage
        } else {
          this.preivewSrc = content.contentImg
        }

      },
      editRouterLink(rowData) {
        if (rowData.channelId == 114) {
          console.log(rowData.liveId);
          this.routerLink('/sysLive/update', 'update', rowData.liveId, {
            params: this.params,
            channelLevel: rowData.channelLevel,
            channelId: rowData.channelId,
            parentId: rowData.parentId
          });
        } else {
          this.routerLink('/content/editing/update', 'update', rowData.id, {
            params: this.params,
            channelLevel: rowData.channelLevel,
            channelId: rowData.channelId,
            parentId: rowData.parentId
          });
        }
      },
      jumpAdd() {
        this.params.parentId = this.params.channelId;
        if (this.params.parentId == 114) {
          this.routerLink('/sysLive/save', 'save', 0, this.params)
        } else {
          this.routerLink('/content/editing/save/', 'save', 0, this.params)
        }
      },
      deleteBatch(url, ids) {
        this.$confirm('是否确认删除?', '警告', {type: 'error'}).then(mes => {
          this.loading = true
          this.$http.post(url, {ids: ids}).then(res => {
            this.loading = false
            if (res.code == '200') {
              this.successMessage('删除成功')
              this.getTableData(this.params)
            }
          })
        }).catch(error => {
          this.loading = false
        })
      },
      batchUpdate(url, status, remark, optType) {
        let params = [];
        let checkedList = this.checkedList;
        for (let i in checkedList) {
          let param = checkedList[i];
          console.log(param)
          param['contentId'] = param.id;
          param['status'] = status;
          params.push(param)
        }
        params = JSON.stringify(params);
        this.$confirm('是否确认' + remark + '?', '警告', {type: 'error'}).then(mes => {
          this.loading = true
          this.$http.post(url, {params: params, optType: optType}).then(res => {
            if (res.code == "200") {
              this.successMessage(remark + '成功');
              this.getTableData(this.params);
            }
          });
        }).catch(error => {
          this.loading = false
        })
      },
      getChannelId(data, node) {
        //获取频道树点击
        this.creatBread(node, []);
        let level = node.level;
        if (level == 2) {
          this.params.attchmentChannelId = data.id;
        }
        if (level == 3) {
          let parent = node.parent.data;
          let parentId = parent.id;
          this.params.attchmentChannelId = parentId;
        }
        this.params.channelId = data.id;//传递频道id
        this.params.modelId = data.modelId;//传递模型id
        this.getChannelInfo(data.id); //获取频道信息
        this.getTableData(this.params); //获取内容信息
        if (level>0) {
          this.showAdd = true;
        } else {
          this.showAdd = false;
        }
        /* if (node.isLeaf) {
           this.showAdd = true;
         } else {
           this.showAdd = false;
         }*/
      },
      getChannelInfo(channelId) {
        //获取模型信息
        let modelList = [];
        axios.post(this.$api.modelList, {containDisabled: false, hasContent: true}).then(res => {
          if (res.code == '200') {
            modelList = res.body //获取模型
          }
          if (channelId != '' && channelId != undefined) {
            axios.post(this.$api.channelGet, {id: channelId, showTxt: false}).then(res => {
              if (res.body.selfModels.length > 0) {
                this.modelList = res.body.models; //获取模型
              } else {
                this.modelList = modelList;
              }
            })
          } else {
            this.modelList = modelList;
          }
        })
      },
      getTypeList() {
        //获取类型列表
        axios.post(this.$api.typeList, {containDisabled: false}).then(res => {
          if (res.code == '200') {
            this.typeList = res.body;
          }
        })
      },
      clickBread(id, index) {
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false;
        }
      },
      syncData() {
        axios.post(this.$api.viewNewSyncData, {}).then(res => {
          if (res.code == '200') {
            this.successMessage('同步成功');
          }
        })
      },
      syncAttachmentData() {
        axios.post(this.$api.viewNewSyncAttachmentData, {}).then(res => {
          if (res.code == '200') {
            this.successMessage('同步成功');
          }
        })
      },
      deleteDuplicateData() {
        axios.post(this.$api.viewNewDeleteDuplicateData, {}).then(res => {
          if (res.code == '200') {
            this.successMessage('删除重复数据中');
          }
        })
      },
      cellClick(row) {
        this.previewId = row.id;
        this.isShowContent = true;
      },
      associatedContent(contentInfo) {
        this.isShowDialog = true;
        this.likeContentId = contentInfo.id;
        this.typeId = contentInfo.typeId;
        this.channelId = contentInfo.channelId;
      }
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      if (this.$route.query.type == 'list') {
        if (this.$route.query.id == 0) {
          this.params.channelId = ''
        } else {
          this.params.channelId = this.$route.query.id;
        }
      }
      let params = this.$route.query.params;
      if (!this.$myUtils.isNull(params)) {
        this.params = params;
      }
      this.initTableData(this.$api.viewNewsPageList, this.params) //请求列表
      this.getChannelInfo() //模型列表
      this.getTypeList() //内容类型
    }
    ,
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

</style>

